<template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ value }}元</p>
    <p>{{ info }}</p>
    <!-- 不能直接改, 因为 props 的数据是只读的 -->
    <!-- <button @click="value -= Math.random() * 2">是兄弟就来砍我</button> -->
    <button @click="sub">是兄弟就来砍我</button>
  </div>
</template>

<script>
export default {
  // 数组: 可以接收很多父组件传递过来的数据
  // props: ['传过来的属性名1', ...]
  // 子组件收到数据后, 想怎么用就怎么用, 和 data 一样
  props: ['title', 'value', 'info'],
  methods: {
    sub() {
      this.$emit('input', this.value - 2)
    }
  }
}
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>